<template>
  <div class="global programDetail">
    <ul class="showProgram">
      <li
        v-for="(item,index) in totalProgramNum"
        :key="index"
        class="controller-item"
        :class="{'controller-item-active':item.show}"
        @click="selectTab(index)"
      >项目{{index+1}}</li>
    </ul>

    <!-- <cube-scroll :data="totalProgramNum">项目</cube-scroll> -->

    <!-- <<<<<<< HEAD -->
    <!-- <div @click="add_project()" v-if="order_type==2&&totalProgramNum.length==0||order_type!=1">
            <span class="addbutton">+</span>
    </div>-->
    <!-- <div v-if="is_create==1">
      <div @click="add_project()" v-if="order_type==2&&totalProgramNum.length==0||order_type!=1">
        <span class="addbutton">+</span>
      </div>
    </div>-->
    <!-- ======= -->
    <!-- <div v-if="is_create==1">
      <div @click="add_project()" v-if="order_type==2&&totalProgramNum.length==0||order_type!=1">
        <span class="addbutton">+</span>
      </div>
    </div>-->
    <div v-if="is_create==1">
      <div @click="add_project()">
        <span class="addbutton">+</span>
      </div>
    </div>
    <!-- >>>>>>> jj1.8.8.2 -->
    <div class="bgIMG" v-show="isShow">您暂时未添加任何项目</div>
    <ul class="programList" v-show="isHidden">
      <!-- <li>医&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;院： {{programData.hospital_name}}
      </li>-->
      <li>项 目 分 类：{{programData.project_type}}</li>
      <li>项 目 名 称：{{programData.project_name||""}}</li>
      <li>医 生 名 称：{{programData.doctor_name}}</li>
      <li>手 术 时 间：{{new Date (programData.operation_time*1000).Format("yyyy-MM-dd")}}</li>
      <li>
        <p>消费总金额：¥{{programData.total_money}}</p>
      </li>
      <li v-if="form_type==0">
        <p>奖励金额：¥{{programData.money}}</p>
        <!-- <p class="tip">
          注：扣除成本的金额=总金额-成本
        </p>-->
      </li>
      <li v-if="form_type==1">
        <p>奖励金额(无补贴)：¥{{programData.money}}</p>
        <!-- <p class="tip">
          注：扣除成本的金额=总金额-成本
        </p>-->
      </li>
      <li>
        <p>
          项目实际扣除：
          <span>现金金额{{programData.cash_money}}</span>
          <span>金币{{programData.gold_coin}}</span>
        </p>
        <!-- <p class="tip">
          注：扣除成本的金额=总金额-成本
        </p>-->
      </li>
      <template v-if="form_type==0">
        <li>金 币 补 贴：{{(programData.cash_allowance || 0) |moneyFormat}}</li>
        <li>银 币 补 贴：{{(programData.integral_allowance || 0) |moneyFormat}}</li>
      </template>

      <!-- <li>
        <p>本单含积分：{{programData.credits}}</p>
      </li>
      <li>
        <p>实 扣 金 额：{{programData.money-programData.credits}}</p>
      </li>-->
    </ul>
    <div v-if="form_type==0">
      <div class="gray" v-show="isHidden"></div>
      <ul class="programList" v-show="isHidden">
        <li>保 险 类 别：{{programData.insure_type || ""}}</li>
        <li>出 生 日 期：{{programData.birthdate || ""}}</li>
      </ul>
    </div>
    <!-- <div class="gray" v-show="isHidden"></div> -->
    <ul class="programList" v-show="isHidden">
      <li v-if="form_type==0">
        审 核 状 态：
        <em class="waiting">{{programData.apply_status==0?'审核中':""}}</em>
        <em class="success">{{programData.apply_status==1||programData.apply_status==3?'已通过':""}}</em>
        <em class="fail">{{programData.apply_status==2?'未通过':""}}</em>
        <em class="fail">{{programData.apply_status==4?'客户合作协议未签':""}}</em>
      </li>
      <li v-if="form_type==1">
        审 核 状 态：
        <em class="waiting">{{programData.apply_status==0?'审核中':""}}</em>
        <em class="success">{{programData.apply_status==1||programData.apply_status==3?'已通过':""}}</em>
        <em class="fail">{{programData.apply_status==2?'未通过':""}}</em>
      </li>
      <li
        v-if="programData.apply_status==2"
      >原&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;因：{{programData.remark}}</li>
    </ul>

    <div class="gray" v-show="isHidden"></div>

    <div class="programList clearfix" v-show="isHidden">
      <p>消费凭证：</p>
      <ul class="photo" :class="{test1 :a , test2: b}">
        <li v-for="item in img4" :key="item.id">
          <img :src="baseUrl+item" @click="handleView(item)" />
        </li>
      </ul>
    </div>
    <div class="gray" v-show="isHidden"></div>
    <div class="programList clearfix" v-show="isHidden">
      <p>手术照片</p>
      <ul class="photo" style="padding-bottom:40px" :class="{test1 :a , test2: b}">
        <li v-for="item in img5" :key="item.id">
          <img :src="baseUrl+item" @click="handleView(item)" />
        </li>
      </ul>
    </div>
    <!--
      v-clipboard:copy="'https://h5.yuepinyuemei.com/evaluate?id='+programData.id"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
            v-if="totalProgramNum.length!=0"
    -->
    <!--  v-if='programData.apply_status==4' -->
    <button
      class="share"
      v-if="programData.apply_status==4 && showBtn"
      @click="gotoCooperate"
    >发送《用户合作协议》</button>
    <button
      class="share"
      @click="gotoDetail"
      v-if="programData && programData.apply_status!=4 && programData.apply_status != 2 && showBtn"
    >查看《用户合作协议》</button>
    <button
      class="share"
      @click="gotoDetail"
      v-if="programData && programData.apply_status == 2 && showBtn"
    >查看驳回原因</button>

    <Modal title="图片预览" v-model="visible">
      <img :src="imgUrl + imgName" v-if="visible" style="width: 100%" />
    </Modal>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
import moment from "moment";
import api from "../../assets/js/api";
export default {
  data() {
    return {
      showBtn: 0, // 是否新预约单 显示底部按钮
      order_sn: "",
      programData: {},
      img4: [],
      img5: [],
      baseUrl: "http://mmkappnew.oss-cn-beijing.aliyuncs.com/",
      a: false,
      b: false,
      isShow: false,
      isHidden: true,
      totalProgramNum: [],
      imgName: "",
      visible: false,
      order_type: "",
      //是否保险必填 0：非必填，1：必填
      is_need_insure: 1,
      //出生年月日
      birthdate: "",
      form_type: null, //报单类型 0：美美咖报单 1：传统报单
      is_create: null //是否可以创建补贴单 1：可以 0 ：不行
    };
  },
  mounted() {
    document.title = "项目列表";
    this.axios.defaults.baseURL = api;
    this.getProgramDetail();
    this.checkApplyCreate();
  },
  filters: {
    //金额数据 做一个格式化处理
    moneyFormat: function(values) {
      let newValues = values;
      if (parseInt(values) == parseFloat(values)) {
        newValues = parseInt(newValues);
      }
      return newValues;
    }
  },
  methods: {
    selectTab(pindex) {
      window.sessionStorage.setItem("pindex", pindex);

      let item = this.totalProgramNum[pindex];

      this.totalProgramNum.forEach((element, index) => {
        if (element.id !== item.id) {
          element.show = false;
          item.show = true;
        }
      });

      this.programData = item;

      this.showBtn = this.programData.show;
      console.log(this.programData);
      this.img4 = item.img4.split("#");
      this.img5 = item.img5.split("#");
      //图片张数为4-6张，盒子高度210px
      if (this.img4.length && this.img4.length > 3) {
        this.a = true;
      }
      if (this.img5.length && this.img5.length > 3) {
        this.a = true;
      }
      //图片张数为1-3张，盒子高度110px
      if (this.img4.length < 4 && this.img4.length > 0) {
        this.b = true;
      }
      if (this.img5.length < 4 && this.img5.length > 0) {
        this.b = true;
      }
    },
    getProgramDetail() {
      let load = this.loading("加载中");
      load.show();
      this.order_sn = location.hash.split(":")[1];
      this.form_type = location.hash.split(":")[2];
      this.axios
        .post("/api/butler/apply_list", {
          order_sn: this.order_sn
        })
        .then(msg => {
          let res = msg.data;
          if (res.code == 200) {
            this.order_type = res.data.water_type;
            //是否需要保险
            this.is_need_insure = res.data.is_need_insure;

            //新增出生年月日
            this.birthdate = res.data.birthdate;

            sessionStorage.setItem("user_credit", res.data.water_credit);
            if (res.data.apply.length == 0) {
              //没有添加项目
              this.isShow = true;
              this.isHidden = false;
              load.hide();
              return false;
            }
            //console.log("totalProgramNum=>",res.data.apply);
            // this.totalProgramNum = [
            //   {},{},{},{},{},{},{},{},{},{}
            // ];
            this.totalProgramNum = res.data.apply;
            this.programData = this.totalProgramNum[0]; //渲染流水单列表默认是第一个
            this.img4 = this.totalProgramNum[0].img4.split("#");
            this.img5 = this.totalProgramNum[0].img5.split("#");
            //图片张数为4-6张，盒子高度210px
            if (this.img4.length && this.img4.length > 3) {
              this.a = true;
            }
            if (this.img5.length && this.img5.length > 3) {
              this.a = true;
            }
            //图片张数为1-3张，盒子高度110px
            if (this.img4.length < 4 && this.img4.length > 0) {
              this.b = true;
            }
            if (this.img5.length < 4 && this.img5.length > 0) {
              this.b = true;
            }
          } else if (msg.data.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: msg.data.msg,
              position: "bottom",
              duration: 2000
            });
          }

          // 在切换到最后一个
          let count = this.totalProgramNum.length;

          let pindex = parseInt(window.sessionStorage.getItem("pindex"));

          if (!pindex) {
            pindex = count - 1;
          }

          this.selectTab(pindex);

          load.hide();
        })
        .catch(error => {
          load.hide();
          console.log(error);
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    // 检测补贴单是否可以创建
    checkApplyCreate() {
      let load = this.loading("加载中");
      load.show();
      this.order_sn = location.hash.split(":")[1]; //流水单号
      this.axios
        .post("/api/butler/check_apply_create", {
          order_sn: this.order_sn
        })
        .then(msg => {
          let res = msg.data;
          if (res.code == 200) {
            this.is_create = res.data.is_create;
            // console.log("is_create",this.is_create)
          } else if (msg.data.code == 250) {
            Toast({
              message: "登录过期，请重新登陆",
              position: "bottom",
              duration: 2000
            });
            this.$router.push("/login");
            return false;
          } else {
            Toast({
              message: msg.data.msg,
              position: "bottom",
              duration: 2000
            });
          }
          load.hide();
        })
        .catch(error => {
          load.hide();
          Toast({
            message: "请求失败，请稍后重试",
            position: "bottom",
            duration: 2000
          });
        });
    },
    add_project() {
      let orderType = location.hash.split(":")[3];
      // if (this.order_type == 2) {
      //   // 全款项目（而且金额大于1000）
      //   this.$router.push(`/Programall:${this.order_sn}:${this.birthdate}:${orderType}`);
      // } else {
      //   //新增 =》是否需要填写保险
      //   // this.is_create 1： 可以   0：不可以
      //   // console.log("this.is_create",this.is_create)
      //   // if(this.is_create==1){
      //   this.$router.push(
      //     `/addProgram:${this.order_sn}:${this.is_need_insure}:${
      //       this.birthdate
      //     }:${this.form_type}:${orderType}`
      //   );
      //   // }else{
      //   //     Toast({
      //   //         message: "不能创建咯",
      //   //         position: "bottom",
      //   //         duration: 2000
      //   //     });
      //   // }
      // }
      this.$router.push(
          `/addProgram:${this.order_sn}:${this.is_need_insure}:${
            this.birthdate
          }:${this.form_type}:${orderType}`
        );
    },
    handleView(name) {
      this.imgName = name;
      this.visible = true;
    },
    onCopy: function(e) {
      Toast({
        message: "复制成功，请发送给顾客进行评价",
        position: "bottom",
        duration: 2000
      });
    },
    onError: function(e) {
      Toast({
        message: "复制失败",
        position: "bottom",
        duration: 2000
      });
    },
    // 跳转去用户协议页面
    gotoCooperate() {
      // 获取当前的补贴单id
      let id = this.programData.id;
      console.log(id);
      // return;
      let str = this.$route.params.id.substring(1);
      this.$router.push({
        name: "cooperateList",
        params: { order_id: str, id: id }
      });
    },
    gotoDetail() {
      console.log(this.programData.ht_url);
      window.location.href = this.programData.ht_url;
    },
    isMiniProground() {
      if (wx || wx.miniProgram) {
        wx.miniProgram.getEnv(res => {
          if (res.miniprogram) {
            return true;
          } else {
            return false;
          }
        });
      } else {
        return false;
      }
    },
    UrlEncode: function(clearString) {
      var output = "";
      var x = 0;

      clearString = this.utf16to8(clearString.toString());
      var regex = /(^[a-zA-Z0-9-_.]*)/;

      while (x < clearString.length) {
        var match = regex.exec(clearString.substr(x));
        if (match != null && match.length > 1 && match[1] != "") {
          output += match[1];
          x += match[1].length;
        } else {
          if (clearString[x] == " ") output += "+";
          else {
            var charCode = clearString.charCodeAt(x);
            var hexVal = charCode.toString(16);
            output +=
              "%" + (hexVal.length < 2 ? "0" : "") + hexVal.toUpperCase();
          }
          x++;
        }
      }
      return output;
    },
    utf16to8: function(str) {
      var out, i, len, c;

      out = "";
      len = str.length;
      for (i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if (c >= 0x0001 && c <= 0x007f) {
          out += str.charAt(i);
        } else if (c > 0x07ff) {
          out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
          out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
        } else {
          out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
          out += String.fromCharCode(0x80 | ((c >> 0) & 0x3f));
        }
      }
      return out;
    }
  }
};
</script>
<style scoped lang="less">
.global {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
}
.showProgram {
  width: 100%;
  // height: 50px;
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242);
  padding: 0px 15px;
  height: auto;
  display: block;
  position: relative;
}
.showProgram li {
  height: 40px;
  line-height: 40px;
  /* background-color: sandybrown; */
  font-size: 14px;
  color: #888888;
  float: left;
  margin-right: 10px;
}
//清除浮动
.showProgram::after {
  content: "";
  display: block;
  clear: both;
}

.addbutton {
  position: absolute;
  width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(204, 204, 204, 0.999);
  text-align: center;
  font-size: 26px;
  top: 7px;
  right: 3%;
}
.controller-item-active {
  color: #ff83a6;
  font-size: 17px;
  border-bottom: 2px solid #ff83a6;
}
.programList {
  width: 100%;
  padding: 0 15px;
  font-size: 17px;
  color: #666;
  box-sizing: border-box;
}

.programList li {
  min-height: 48px;
  line-height: 48px;
  border-top: 1px solid rgba(204, 204, 204, 0.3242) !important;
  font-size: 17px;
  color: #666;
  .tip {
    color: #ccc;
    margin-top: -25px;
  }
  .waiting {
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(245, 166, 35, 1);
  }
  .success {
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(7, 168, 3, 1);
  }
  .fail {
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    font-weight: 400;
    color: rgba(246, 70, 101, 1);
  }
}
.programList li:nth-of-type(1) {
  border-top: none !important;
}
.programList:nth-of-type(1) {
  padding-right: 0;
}
.programList a li {
  border-bottom: 1px solid rgba(204, 204, 204, 0.3242) !important;
}
.programList p {
  height: 50px;
  line-height: 50px;
}
.gray {
  width: 100%;
  height: 10px;
  background: rgba(204, 204, 204, 0.2018);
}
.photo {
  width: 100%;
  /* display: flex;
  justify-content: space-between;
  flex-wrap: wrap; */
  height: 310px;
}
.photo li {
  width: 90px;
  height: 90px;
  /* background-color: #d8d8d8; */
  margin-bottom: 10px;
  float: left;
  margin-right: 6px;
}
.photo li img {
  width: 90px;
  height: 90px;
  display: block;
}
.test1 {
  height: 210px;
}
.test2 {
  height: 110px;
}
.bgIMG {
  width: 100%;
  /* height: 100%; */
  /* background-color: #ff83a6 */
  font-size: 17px;
  color: #666;
  text-align: center;
  margin-top: 160px;
}
</style>

<style lang="less">
.ivu-modal-footer,
.ivu-modal-header {
  display: none !important;
}
.share {
  display: block;
  margin: 20px auto;
  font-size: 17px;
  letter-spacing: 1px;
}
</style>


